<template>
	<!-- 商品碎片 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="商品碎片" />
		<noData v-if="sgoodsList.length === 0" />
		<view class="list" v-else>
			<view class="main" v-for="(item,index) in sgoodsList" :key="index" @click="toDetail(item)">
				<image :src="item.cover_image"></image>
				<view class="title">{{item.goods_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sgoodsList:[]
			}
		},
		onShow() {
			this.sgoodsList = [];
			this.getSgoodslis();
		},
		onPullDownRefresh() {
			this.page++;
			this.getSgoodslis();
		},
		methods: {
			//获取碎片列表
			getSgoodslis(){
				this.$api.sgoodslis().then(res=>{
					this.sgoodsList = this.sgoodsList.concat(res);
				})
			},
			//碎片详情
			toDetail(item){
				uni.navigateTo({
					url:`./goodsfragmentDetail?goods_id=${item.goods_id}&activity_id=${item.activity_id}`
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.list{
	margin: 50rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	
	.main{
		width: 336rpx;
		height: 448rpx;
		background: #FBFBFB;
		border-radius: 10rpx;
		
		&:nth-child(2n-1){
			margin: 0 16rpx 30rpx 0;
		}
		
		image{
			width: 336rpx;
			height: 336rpx;
		}
		.title{
			width: 318rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			line-height: 32rpx;
			@include two;
			margin: 15rpx 10rpx;
		}
	}
}
</style>
